<template>
  <div :style="pageHeighStyle">
    <div
      class="RegistrationCenter_meng"
      :style="windowHeights"
      v-if="TabwindowHeights==0"
      @click="quxiao"
    ></div>
    <div class="RegistrationCenter_show" v-if="TabwindowHeights==0">
      <div v-html="username"></div>
      <div>
        <div>
          <img src="http://www.zhaoshengku.net/wx-%E7%94%B5%E8%AF%9D.png" alt />
          <span v-html="userphon"></span>
        </div>
        <div>
          <img
            src="http://www.zhaoshengku.net/wx-%E4%BD%8D%E7%BD%AE%20%E6%8B%B7%E8%B4%9D%205.png"
            alt
          />
          <span v-html="userdizhi"></span>
        </div>
      </div>
      <div>
        <span>备注：</span>
        <span v-html="userbeizhu"></span>
      </div>
    </div>
    <div
      class="RegistrationCenter_die"
      v-for="(item,index) in xiangmuList"
      :key="index"
      v-if="listisshow"
    >
      <div>
        <img :src="item.article_thumbnail" alt />
        <span>{{item.article_title}}</span>
      </div>
      <div >
        <div>报名用户</div>
        <div v-if="item.student">
          <div v-for="(i,n) in item.student" :key="n" @click="hh(i)">
            <img
              :src="i.member_info.info_avatar?i.member_info.info_avatar:'http://www.zhaoshengku.net/wx-%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%206.png'"
              alt
            />
            <div>{{i.enlist_name}}</div>
          </div>
        </div>
        <!-- <div v-if="gengduoisshow" @click="clickss()">查看更多</div> -->
        <div class="none_div" style="width:100%;" v-else>此项目暂时还未有学生报名！</div>
      </div>

    </div>
    <div v-if="!listisshow" class="none_div">您暂时没有任何记录！</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowHeights: "",
      pageHeighStyle: "",
      TabwindowHeights: 1,
      headerCode: "",
      xiangmuList: [],
      username: "",
      userphon: "",
      userdizhi: "",
      userbeizhu: "",
      listisshow: false,
      pagenum: 1,
      gengduoisshow: false
    };
  },
  methods: {
    hh(i) {
      this.username = i.enlist_name;
      this.userphon = i.enlist_phone;
      this.userdizhi = i.enlist_addr;
      this.userbeizhu = i.enlist_remarks;
      this.TabwindowHeights = 0;
      this.pageHeighStyle = this.windowHeights + ";overflow:hidden";
    },
    quxiao() {
      this.TabwindowHeights = 1;
      this.pageHeighStyle = "";
    },
    clickss() {}
  },
  mounted() {
    wx.setNavigationBarTitle({
      title: "报名中心"
    });
    wx.getSystemInfo({
      success: res => {
        this.windowHeights = "height:" + res.windowHeight * 2 + "rpx";
      }
    });
    // 获取token
    wx.getStorage({
      key: "koken",
      success: res => {
        this.headerCode = "Bearer " + res.data;
        // 获取报名列表
        wx.request({
          url: "https://api.zhaoshengku.net/index/member/getarticleenlist",
          method: "post",
          data: {
            // id:46,
            article_type: 1,
            pagenum: this.pagenum,
            pagesize: 10
          },
          header: {
            Authorization: this.headerCode
            //  "X-Requested-With": "xmlhttprequest"
          },
          success: res => {
            console.log(res);
            if (res.data.code == 200) {
              if (res.data.data.data.length == 0) {
                this.listisshow = false;
              } else {
                this.listisshow = true;
                this.xiangmuList = res.data.data.data;
              }
            }
          },
          fail: res => {
            console.log(res);
            if (res.errMsg) {
              wx.showToast({
                title: "请检查网络连接！",
                icon: "none",
                duration: 1500
              });
            }
          }
        });
      }
    });
  },
  onReachBottom() {
    if (this.xiangmuList.length < 10) {
      return;
    } else {
      wx.showToast({
        title: "正在加载中",
        icon: "loading",
        duration: 5000,
        mask: true
      });
      this.pagenum += 1;
      wx.request({
        url: "https://api.zhaoshengku.net/index/member/getarticleenlist",
        method: "post",
        data: {
          // id:46,
          article_type: 1,
          pagenum: this.pagenum,
          pagesize: 10
        },
        header: {
          Authorization: this.headerCode
          //  "X-Requested-With": "xmlhttprequest"
        },
        success: res => {
          if (res.data.code == 200) {
            if (res.data.data.data.length == 0) {
              wx.hideToast();
              wx.showToast({
                title: "暂时没有更多数据",
                icon: "none",
                duration: 5000,
                mask: true
              });
            } else {
              this.xiangmuList = this.xiangmuList.concat(res.data.data.data);
              wx.hideToast();
            }
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.none_div {
  font-size: 26rpx;
  color: #666;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
}
.RegistrationCenter_meng {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  left: 0;
  top: 0;
}
.RegistrationCenter_show {
  padding: 40rpx 112rpx;
  background: #fff;
  width: 688rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  position: absolute;
  left: 31rpx;
  top: 200rpx;
}
.RegistrationCenter_show > div:nth-child(1) {
  width: 100%;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  padding-bottom: 37rpx;
  border-bottom: 1rpx solid #dddddd;
}
.RegistrationCenter_show > div:nth-child(2) {
  padding-top: 53rpx;
  padding-bottom: 28rpx;
  border-bottom: 1rpx solid #dddddd;
}
.RegistrationCenter_show > div:nth-child(2) > div {
  display: flex;
}
.RegistrationCenter_show > div:nth-child(2) > div img {
  width: 30rpx;
  height: 30rpx;
  margin-right: 18rpx;
}
.RegistrationCenter_show > div:nth-child(2) > div span {
  display: inline-block;
  width: 382rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
.RegistrationCenter_show > div:nth-child(3) {
  display: flex;
  margin-bottom: 100rpx;
}
.RegistrationCenter_show > div:nth-child(3) > span:nth-child(1) {
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
  display: inline-block;
  width: 90rpx;
}
.RegistrationCenter_show > div:nth-child(3) > span:nth-child(2) {
  flex: 1;
}
.RegistrationCenter_show > div:nth-child(3) > span:nth-child(2) {
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
}
.RegistrationCenter_show > div:nth-child(2) > div:nth-child(2) {
  margin-top: 47rpx;
}
.RegistrationCenter_show > div:nth-child(2) > div:nth-child(2) img {
  width: 24rpx;
  height: 35rpx;
  margin-right: 22rpx;
}
.RegistrationCenter_show > div:nth-child(2) > div:nth-child(1) {
  align-items: center;
}
.RegistrationCenter_show > div:nth-child(4) {
  width: 188rpx;
  height: 47rpx;
  border: 1rpx solid #000000;
  border-radius: 40rpx;
  text-align: center;
  line-height: 47rpx;
  margin: 0 auto;
  margin-top: 80rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  margin-bottom: 80rpx;
}
.RegistrationCenter_die {
  background: #eeeeee;
  padding-top: 20rpx;
}
.RegistrationCenter_die > div:nth-child(1) {
  background: #fff;
  padding-left: 74rpx;
  padding-right: 143rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 219rpx;
  margin-bottom: 10rpx;
}
.RegistrationCenter_die > div:nth-child(1) img {
  width: 177rpx;
  height: 177rpx;
  border-radius: 50%;
}
.RegistrationCenter_die > div:nth-child(1) span {
  display: inline-block;
  width: 305rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  line-height: 40rpx;
}
.RegistrationCenter_die > div:nth-child(2) {
  padding: 0 33rpx 33rpx 33rpx;
  background: #fff;
}
.RegistrationCenter_die > div:nth-child(2) > div:nth-child(1) {
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  width: 100%;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #dddddd;
}
.RegistrationCenter_die > div:nth-child(2) > div:nth-child(2) {
  margin-top: 40rpx;
  display: flex;
  flex-wrap: wrap;
}
.RegistrationCenter_die > div:nth-child(2) > div:nth-child(2) > div {
  width: 157rpx;
  text-align: center;
  margin-bottom: 84rpx;
  margin-left: 55rpx;
}
.RegistrationCenter_die > div:nth-child(2) > div:nth-child(2) > div > img {
  width: 157rpx;
  height: 157rpx;
  margin-bottom: 12rpx;
  border-radius: 50%;
}
.RegistrationCenter_die > div:nth-child(2) > div:nth-child(2) > div > div {
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
  width: 100%;
  text-align: center;
}
.RegistrationCenter_die > div:nth-child(2) > .none_div {
  display: flex;
  justify-content: space-around;
  width: 200rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
}
</style>
